<template>
  <div class="wrapper" :class="{ extend: extend }" :style="wrapperSty">
    <form @submit.prevent>
      <input
        ref="input"
        type="text"
        placeholder="ToKnow"
        @change="handleChange($event)"
        :value="searchValue"
      />
      <button class="iconfont icon-search" @click="$emit('search')">S</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { ref, Ref, computed, CSSProperties } from 'vue'
const props = defineProps<{
  searchValue: string
  width: number
  height: number
  backgroundColor?: string
}>()

let wrapperSty = computed(() => {
  let ret: CSSProperties = {
    width: props.width + 'px',
    height: props.height + 'px',
    backgroundColor: props.backgroundColor || 'white',
  }
  return ret
})

const emit = defineEmits<{
  (e: 'update:searchValue', value: string): void
  (e: 'search'): void
}>()

let extend = ref(false)

let input: Ref<HTMLInputElement | null> = ref(null)
function focus() {
  let dom = input.value as HTMLInputElement
  dom.focus()
}

function handleChange(e: Event) {
  emit('update:searchValue', (e.target as any).value)
}
</script>

<style scoped lang="scss">
@import 'style/shortcut';
@import 'style/config';

.wrapper {
  @include flex();
  border-radius: 8px;
  transition: 0.3s;

  form {
    @include flex();
    height: 100%;
    border-radius: 5%;
    box-shadow: 0px 0px 3px $gray;
    transition: 0.15s;

    &:focus-within {
      box-shadow: 0 0 5px $gray;
    }

    input,
    button {
      height: 100%;
      border: none;
      outline: none;
      background-color: transparent;
    }

    input {
      width: 70%;
      flex-shrink: 1;
      box-sizing: border-box;
      padding-left: 10px;
    }

    button {
      height: 70%;
      flex-shrink: 0;
      transition: 0.3s;
      border-radius: 10%;

      &:hover {
        background-color: $light;
        cursor: pointer;
      }
    }
  }
}
</style>
